<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="lookAround :: htmlhead" th:with="title='favorites'"></head>
<body th:onload="'lookAroundInit(\'' + ${category} + '\');'">

<!--<script th:src="@{/vendor/modernizr/modernizr.custom.js}"></script>-->
<!--<script th:src="@{/vendor/jquery/dist/jquery.js}"></script>-->
<!--<script th:src="@{/vendor/bootstrap/dist/js/bootstrap.js}"></script>-->
<!--<script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}"></script>-->
<!--<script th:src="@{/vendor/jquery.flexslider/jquery.flexslider.min.js}"></script>-->
<!--<script th:src="@{/media/js/app.js}" ></script>-->
<!--<script th:src="@{/js/comm.js}" ></script>-->
<!--<script th:src="@{/js/lookAround.js}" ></script>-->
<!--<script th:src="@{/js/collect.js}" ></script>-->
<!--<script th:src="@{/index/js/freelancer.min.js}"></script>-->


<!-- Theme CSS -->
<link href="../../index/css/freelancer.min.css" rel="stylesheet" />
<div th:replace="fragments/alert :: alert">alert</div>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand" href="/index">云收藏</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <!--<li>
            <a href="/lookAround/standard/ALL">随便看看</a>
        </li>-->
        <li>
          <a href="/login" th:unless="${user != null}">登录</a>
          <a href="/" th:if="${user != null}" th:text="${user.userName}" class="userName"></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="wrapper">
  <section style="margin-left:0;">
    <div class="content-wrapper">
      <div class="row">
        <div class="col-lg-9 col-md-9">
          <div class="classification">
            <ul>
              <li>
                <a id="categoryALL" name="categoryALL" class="active" href="/lookAround/standard/ALL">全部</a>
              </li>
              <li>
                <a id="categoryTRAVEL" name="categoryTRAVEL" href="/lookAround/standard/TRAVEL">旅行</a>
              </li>
              <li>
                <a id="categoryFOOD" name="categoryFOOD" href="/lookAround/standard/FOOD">料理</a>
              </li>
              <li>
                <a id="categoryEXERCISE" name="categoryEXERCISE" href="/lookAround/standard/EXERCISE">健身</a>
              </li>
              <li>
                <a id="categoryPHOTOGRAPH" name="categoryPHOTOGRAPH" href="/lookAround/standard/PHOTOGRAPH">摄影</a>
              </li>
              <li>
                <a id="categoryMUSIC" name="categoryMUSIC" href="/lookAround/standard/MUSIC">音乐</a>
              </li>
              <li>
                <a id="categoryREARING" name="categoryREARING" href="/lookAround/standard/REARING">育儿</a>
              </li>
              <li>
                <a id="categoryLOVE" name="categoryLOVE" href="/lookAround/standard/LOVE">恋爱</a>
              </li>
              <li>
                <a id="categoryBUSINESS" name="categoryBUSINESS" href="/lookAround/standard/BUSINESS">创业</a>
              </li>
              <li>
                <a id="categoryART" name="categoryART" href="/lookAround/standard/ART">美术设计</a>
              </li>
              <li>
                <a id="categoryMANAGER" name="categoryMANAGER" href="/lookAround/standard/MANAGER">产品经理</a>
              </li>
              <li>
                <a id="categoryMARKET" name="categoryMARKET" href="/lookAround/standard/MARKET">市场营销</a>
              </li>
              <li>
                <a id="categoryRUNNING" name="categoryRUNNING" href="/lookAround/standard/RUNNING">运营</a>
              </li>
            </ul>
          </div>
          <div class="slider">
            <ul class="slides">
              <li th:each="collect : ${fiveCollects}" th:style="'background-image:url(' + @{(${collect.logoUrl}=='' ? 'img/favicon.png' : ${collect.logoUrl})} + ')'">
                <h3>
                  <a th:href="@{${collect.url}}" th:text="${collect.title}"></a>
                </h3>
                <p>
                  <a th:href="'/collector/' + ${collect.userId} + '/0'">
                    <img th:src="@{(${collect.profilePicture}=='' ? 'img/favicon.png' : '../../' + ${collect.profilePicture})}"></img>
                    <span th:text="${collect.userName}"></span>
                  </a>
                </p>
              </li>
            </ul>
          </div>
          <div id="standard" th:if="${collects.size() > 0}" style="margin-top: 45px;">
            <!--<div class="btn-group btn-xs mb pull-right" style="margin-top: -25px;">

              <a th:if="${otherPeople == null}" class="btn btn-xs btn-default active"  th:href="'/lookAround/standard/' + ${category}">

                <span class="icon-layers"></span>

              </a>

              <a th:if="${otherPeople != null}" class="btn btn-xs btn-default active"  th:href="'/lookAround/standard/' + ${category}">

                <span class="icon-layers"></span>

              </a>

              <a th:if="${otherPeople == null}" class="btn btn-xs btn-default" th:href="'/lookAround/simple/' + ${category}" >

                <span class="icon-list"></span>

              </a>

              <a th:if="${otherPeople != null}" class="btn btn-xs btn-default" th:href="'/lookAround/simple/' + ${category}" >

                <span class="icon-list"></span>

              </a>

            </div>-->
            <ul class="timeline-alt" id="collectStandardList">

              <li th:each="collect,collectStat : ${collects}" >

                <a th:href="'/collector/' + ${collect.userId} + '/0'" class="hidden-xs timeline-badge sharing-user-avatar" th:style="'background-image:url(' + @{(${collect.profilePicture}=='' ? 'img/favicon.png' : '../../' + ${collect.profilePicture})} + ')'"></a>

                <div class="timeline-panel">

                  <div class="popover right">

                    <div class="arrow"></div>

                    <div class="popover-content">

                      <div class="table-grid">

                        <div class="col">

                          <div class="pull-right dropdown dropdown-list">

                            <a href="#" data-toggle="dropdown" class="sharing-more-button" th:if="${userId == collect.userId}" >

                              <span class="fa fa-angle-down"></span>

                            </a>

                            <ul class="dropdown-menu animated bounceIn">

                              <li>

                                <div class="list-group">

                                  <a href="javascript:void(0);"  class="list-group-item"  th:onclick="'getCollect(' + ${collect.id} + ',\'\');'" >

                                    <div class="media-box">

                                      <div class="pull-left">

                                        <em class="fa fa-pencil-square-o fa-2x fa-fw text-info"></em>

                                      </div>

                                      <div class="media-box-body clearfix">

                                        <p class="m0">修改收藏</p>

                                        <p class="m0 text-muted">

                                          <small>修改收藏的各种属性</small>

                                        </p>

                                      </div>

                                    </div>

                                  </a>

                                  <a href="javascript:void(0);"  class="list-group-item" th:onclick="'onCollect(' + ${collect.id} + ',\'\');'">

                                    <div class="media-box">

                                      <div class="pull-left">

                                        <em class="fa fa-trash fa-2x fa-fw text-danger"></em>

                                      </div>

                                      <div class="media-box-body clearfix">

                                        <p class="m0">删除</p>

                                        <p class="m0 text-muted">

                                          <small>该分享会永久删除</small>

                                        </p>

                                      </div>

                                    </div>

                                  </a>

                                </div>

                              </li>

                            </ul>

                          </div>

                          <div class="m0">

                            <a th:href="'/collector/' + ${collect.userId} + '/0'" class="text-muted" th:text="${collect.userName}">user name</a>

                            <a th:if="${userId == collect.userId}" th:id="'private' + ${collect.id}"   class="deco-none"  title="设为私密"  href="javascript:void(0);"  th:style="'display:' + @{(${collect.type}=='PRIVATE' ? 'none' : 'inline-block')} + ''"  th:onclick="'changePrivacy(' + ${collect.id} + ',\'PRIVATE\');'">

                              <span class="fa fa-lock" style="color: #eee;"></span>

                            </a>

                            <a th:if="${userId == collect.userId}" th:id="'public' + ${collect.id}"  class="deco-none"  title="设为公开"  href="javascript:void(0);"  th:style="'display:' + @{(${collect.type}=='PUBLIC' ? 'none' : 'inline-block')} + ''"  th:onclick="'changePrivacy(' + ${collect.id} + ',\'PUBLIC\');'">

                              <span class="fa fa-lock text-warning"></span>

                            </a>

                            <small th:if="${type != 'explore'}" class="ml-sm text-muted" th:text="${collect.collectTime}">6天前  </small>

                          </div>

                        </div>

                      </div>

                      <div class="m0" th:text="${collect.remark}"></div>

                      <div class="media resource-card-thumbnail">

                        <a  th:href="@{${collect.url}}" class="pull-left" target="_blank">

                          <div class="media-object resource-card-image"  th:style="'background-image:url(' + @{(${collect.logoUrl}=='' ? 'img/favicon.png' : ${collect.logoUrl})} + ')'" ></div>

                        </a>

                        <div class="media-body">

                          <h4 class="visible-xs media-heading resource-card-title-xs">

                            <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>

                          </h4>

                          <h3 class="hidden-xs media-heading resource-card-title">

                            <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>

                          </h3>

                          <div class="hidden-xs resource-card-content">

                            <p  th:text="${collect.description}">description</p>

                          </div>

                        </div>

                      </div>

                      <div class="m0">

                        <span class="icon-folder mr-sm"></span>

                        <!--<a href="javascript:void(0);" class="normal-color-a ng-binding" th:if="${otherPeople == null}"   th:text="${collect.favoriteName}" th:onclick="'locationUrl(\'/standard/' + ${collect.favoriteId} + '/0\',\''+ ${collect.favoriteId} + '\');'" >文件加名称</a>-->

                        <a th:href="'/standard/' + ${collect.favoriteId} + '/' + ${collect.userId}" class="normal-color-a ng-binding"   th:text="${collect.favoriteName}">文件加名称</a>

                        <div class="pull-right hidden-xxs" th:onmouseover="'share(\''+${collect.url}+'\',\''+${collect.title}+'\',\''+${collect.description}+'\',\''+${collect.logoUrl}+'\');'">
                          <small class="jiathis_style_32x32">

                             <a href="javascript:void(0);" class="jiathis jiathis_txt sharing-action-button" style="font-size: 100%;line-height:18px!important;padding-top:2px;">

                              <span class="fa fa-share-alt "></span>

                              分享&nbsp;
                            </a>

                              |

                            <a th:id="'like' + ${collect.id}" class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'none' : 'inline-block')} + ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">

                              <span class="fa fa-thumbs-o-up"></span>

                              <show th:id="'likeS' + ${collect.id}"  th:text="|点赞(${collect.praiseCount})|" ></show>

                            </a>

                            <if style="display:none"  >

                              |

                            </if>

                            <a th:id="'unlike' + ${collect.id}" class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'inline-block' : 'none')}+ ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">

                              <span class="fa fa-thumbs-up"></span>

                              <show th:id="'unlikeS' + ${collect.id}" th:text="|取消点赞(${collect.praiseCount})|"></show>

                            </a>

                            <input th:id="'praiseC' + ${collect.id}" type="hidden" name="praiseC" th:value="${collect.praiseCount}" />

                            <input th:id="'commentC' + ${collect.id}" type="hidden" name="commentC" th:value="${collect.commentCount}" />

                            |

                            <a class="sharing-action-button btn-comment" href="javascript:void(0);" th:onclick="'switchComment(' + ${collect.id} + ');'" >

                              <span class="fa fa-comment-o"></span>

                              <show th:id="'commentS' + ${collect.id}" th:text="|评论(${collect.commentCount})|">	 评论(0)</show>

                            </a>

                            <if th:if="${userId != collect.userId}" >

                              |

                            </if>

                            <a th:if="${userId != collect.userId}" class="sharing-action-button" th:onclick="'getCollect(' + ${collect.id} + ',\'\');'" >

                              <span class="fa fa-spoon"></span>

                              收藏

                            </a>

                          </small>

                        </div>

                      </div>

                      <div class="collapse" th:id="'collapse' + ${collect.id}">

                        <comments th:id="'commentList' + ${collect.id}"></comments>

                        <div class="media p0" th:id="'comment' + ${collect.id}">

                          <div class="media-body">

                            <form>

                              <div class="input-group">

                                <input th:id="'commentContent' + ${collect.id}"   type="text" placeholder="输入评论..." class="form-control"/>

                                <span class="input-group-btn">

                                                   <button class="btn btn-default" type="button" th:onclick="'comment(' + ${collect.id} + ');'" >发送</button>

                                                </span>

                              </div>

                            </form>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </li>

            </ul>
            <button  id="loadStandardMore" class="mt-lg btn btn-primary btn-block" style="display:none;">加载更多</button>
            <div id="loadingStandard" style="text-align:center;margin:20px;display:none;"><img src="/img/loading.gif" width="64" height="64" /></div>
            <br />
            <br />
            <br />
          </div>
          <div  th:if="${collects.size() == 0}" style="margin-top: 45px;">
            <h3 align="center" style="color:#aaaaaa" class="mt text-thin">暂时没有该类别的收藏</h3>
          </div>
        </div>

        <input type="hidden" name="collectId" id="collectId" />

        <input type="hidden" name="forward" id="forward" th:value="'/standard/'+${type}+'/0'" />

        <input type="hidden" name="category" id="category" th:value="${category}" />

        <input type="hidden" name="pageType" id="pageType" th:value="${type}" />

        <input type="hidden"  id="userId" th:value="${userId}" />

        <div class="col-lg-3 col-md-3 hidden-sm">
          <div class="panel panel-default panel-follow">
            <div class="panel-heading">推荐关注</div>
            <ul class="list-group" th:each="user,userStat : ${fiveUsers}">
              <li class="list-group-item">
                <a th:href="'/collector/' + ${user.id} + '/0'" class="pull-left">
                  <img th:src="@{(${user.profilePicture}=='' ? '/img/favicon.png' : '../../' + ${user.profilePicture})}" alt="" width="32px" height="32px"></img>
                </a>
                <div class="media-body">
                  <h4>
                    <a th:href="'/collector/' + ${user.id} + '/0'" th:text="${user.userName}"></a>
                  </h4>
                  <small></small>
                  <a href="#" th:if="${userId != user.id}" th:id="'follow' + ${user.id}" class="btn btn-default btn-xs" th:text="@{(${user.isFollow}=='FOLLOW' ? '取消关注' : '关注')}"
                     onclick="changeFollow(this.id)"></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer style="margin-left:0;">
    <span>&copy; 2016 - 2017</span>
    <span class="pull-right">
	                  云收藏 | 让收藏更简单
	    </span>
  </footer>
</div>
<script type="text/javascript" src="/webjarslocator/jquery/jquery.min.js"></script>
<script th:src="@{/vendor/jquery.form/jquery.form.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.6/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/vendor/modernizr/modernizr.custom.js}" ></script>
<script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}" ></script>
<script th:src="@{/vendor/jquery.flexslider/jquery.flexslider.min.js}"></script>
<script th:src="@{/media/js/app.js}" ></script>
<script th:src="@{/js/comm.js}" ></script>
<script th:src="@{/js/collect.js}" ></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script th:src="@{/webjars/vue/1.0.24/vue.min.js}"></script>
<script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
<script th:src="@{/vendor/toastr/toastr.min.js}"></script>
<script th:src="@{/js/lookAround.js}" ></script>
<script th:src="@{/index/js/freelancer.min.js}"></script>
<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jia.js?uid=2126448" charset="utf-8"></script>
<script>
  (function($) {
    $('body').scrollspy({
      target: '.navbar-fixed-top',
      offset: 51
    });
    $('#mainNav').affix({
      offset: {
        top: 100
      }
    })
  })(jQuery);
   $(".slider").flexslider({
      animation: "side",
      slideshowSpeed: 3000,
      pauseOnHover: true,
      directionNav: true,
      controlNav: true,
      prevText: "&lt;",
      nextText: "&gt;"
   });
</script>
</body>
</html>